<template>
  <a-table :bordered="bordered"
           :columns="columns"
           :data-source="data"
           :pagination="pagination"
           :loading="loading"
           :scroll="{ y: true }"
           :rowKey="(record, index) => index"
           :row-selection="rowSelection"
           :customRow="handleCustomRow"
           :rowClassName="(record, index) => (index % 2 === 0 ? 'table-striped' : null)"
           class="m-top"
           @change="handleTableChange">
    <template v-for="(column,columnIndex) in columns"
              :key="columnIndex"
              v-slot:[column.slots?.title]>
      <span>
        {{ column.slots?.title }}
        <a-tooltip v-if="column.tooltip"
                   :title="column.tooltip">
          <QuestionCircleOutlined />
        </a-tooltip>
      </span>
    </template>
    <template v-if="buttons.length > 0"
              #action="{ record }">
      <template v-for="(item, index) in buttons"
                :key="index">
        <template v-if="typeof item.show === 'function' ? item.show(record) : true">
          <a-popconfirm v-if="item.confirm"
                        :title="item.confirmText"
                        :disabled="typeof item.disabled === 'function' ? item.disabled(record): false"
                        @confirm="handleClick(record, item.handler)">
            <a-button size="small"
                      :disabled="typeof item.disabled === 'function' ? item.disabled(record): false"
                      :type="item.type || 'primary'"
                      :style="item.style"
                      class="operation"
                      @click.stop>{{ item.recordButton ? record[item.text] : item.text  }}
            </a-button>
          </a-popconfirm>
          <a-button v-else
                    size="small"
                    :disabled="typeof item.disabled === 'function' ? item.disabled(record): false"
                    :type="item.type || 'link'"
                    :style="item.style"
                    class="operation"
                    @click.stop="handleClick(record, item.handler)">{{ item.recordButton ? record[item.text] : item.text  }}
          </a-button>
        </template>
      </template>
    </template>
    <template #detail="{ record }">
      <a-button type="link"
                class="detail"
                @click.stop="handleDetail(record)">参数查看</a-button>
    </template>
    <!-- 斜体 -->
    <template #Italic="{ record, text }">
      <i :title="text">{{ text }}</i>
    </template>
    <template #link="{ record, text }">
      <a :href="text"
         target="_blank">Link</a>
    </template>
  </a-table>
</template>

<script lang="ts">
import { defineComponent, reactive, watch, PropType } from 'vue';
import { Table, Button } from 'ant-design-vue';
import { ColumnProps, ButtonProps } from './types';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';

export default defineComponent({
  name: 'Table',
  components: {
    [Table.name]: Table,
    [Button.name]: Button,
    QuestionCircleOutlined,
  },

  props: {
    bordered: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array as PropType<ColumnProps[]>,
      default: () => [],
    },
    data: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
    page: {
      type: Number as PropType<number>,
      default: 0,
    },
    pageSize: {
      type: Number as PropType<number>,
      default: 5,
    },
    total: {
      type: Number as PropType<number>,
      default: 0,
    },
    loading: {
      type: Boolean as PropType<boolean>,
      default: false,
    },
    buttons: {
      type: Array as PropType<ButtonProps[]>,
      default: () => [],
    },
    rowSelection: {
      type: Object as PropType<{
        selectedRowKeys: Array<any>;
        onChange: (selectedRowKeys: Array<any>) => {};
      }>,
      default: null,
    },
  },

  emits: ['page-change', 'handle-detail', 'handle-click'],

  setup(props, { emit }) {
    const pagination = reactive({
      current: props.page,
      pageSize: props.pageSize,
      total: props.total,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['5', '10', '15', '20'],
      showTotal: (total: Number) => `共 ${total} 条记录`,
    });

    const handleTableChange = (pagination: any, filter?: any, sorter?: any) => {
      const data = {
        page: pagination.current,
        pageSize: pagination.pageSize,
        sortOrder: undefined,
      };
      if (sorter.order) {
        Object.assign(data, { sortOrder: sorter.order });
      }
      emit('page-change', data);
    };

    const handleCustomRow = (record: any, index: number) => {
      return {
        onClick: () => {
          emit('handle-click', record);
        },
      };
    };

    const handleClick = (e: HTMLDivElement, handler: any) => {
      if (typeof handler === 'function') {
        handler(e);
      } else {
        emit(handler, e);
      }
    };

    const handleDetail = (record: any) => {
      emit('handle-detail', record);
    };

    watch(props, (val) => {
      pagination.total = val.total;
      pagination.current = val.page;
      pagination.pageSize = val.pageSize;
    });

    return {
      pagination,
      handleTableChange,
      handleDetail,
      handleClick,
      handleCustomRow,
    };
  },
});
</script>

<style lang="less" scoped>
:deep(.ant-table) {
  font-size: 16px;
}

.operation {
  color: rgba(32, 79, 199, 1);

  &:not(:last-child) {
    margin: 0 5px 5px 0;
  }
}

:deep(.table-striped) {
  background-color: rgba(61, 110, 235, 0.1);
}

.detail {
  color: rgba(32, 79, 199, 1);
}

:deep(.ant-table-thead) {
  & > tr {
    & > th {
      background-color: rgba(232, 232, 232, 1);
    }
  }
}
</style>
